<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <meta charset="utf-8">
    <title>地图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link href="/boot/css/bootstrap.css" rel="stylesheet">
    <link href="/boot/plugins/revolution/css/settings.css" rel="stylesheet" type="text/css"><!-- REVOLUTION SETTINGS STYLES -->
    <link href="/boot/plugins/revolution/css/layers.css" rel="stylesheet" type="text/css"><!-- REVOLUTION LAYERS STYLES -->
    <link href="/boot/plugins/revolution/css/navigation.css" rel="stylesheet" type="text/css"><!-- REVOLUTION NAVIGATION STYLES -->
    <link href="/boot/css/style.css" rel="stylesheet">
    <link href="/boot/css/responsive.css" rel="stylesheet">


<%--    <link rel="shortcut icon" href="/boot/images/favicon.png" type="image/x-icon">--%>
<%--    <link rel="icon" href="/boot/images/favicon.png" type="image/x-icon">--%>

    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=Nob59Czr3B63ppRCe3BVAW6n2mU3i5mr"></script>
</head>
<body>
<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/4/19
  Time: 10:13 上午
  To change this template use File | Settings | File Templates.
--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>

<!-- 模态框（Modal） -->
<%-- <jsp:include page="../nav.jsp" flush="true"></jsp:include>--%>



<%--<script>--%>
<%--    function login(){--%>
<%--        let username = document.getElementById("username").value;--%>
<%--        let password = document.getElementById("password").value;--%>

<%--        //通过ajax发送请求到后端 - 局部刷新--%>
<%--        //ajax请求的后台不能有任何跳转的语句 - 后台仅仅会返回json数据.--%>
<%--        //ajax - 纯js写法--%>
<%--        //jquery语法--%>

<%--        //发送到后台的数据使用json对象 {"key":"value","key":"value"}--%>
<%--        let send_data = {"username":username,"password":password}--%>
<%--        $.post('/mac/user/login',send_data,function(data){--%>
<%--            //此处的data代表的是后台返回过来的Json字符串->json对象--%>
<%--            //json对象.key -> value--%>
<%--            let uu = document.getElementById("uu");--%>
<%--            let pp = document.getElementById("pp");--%>
<%--            uu.style.display="none";--%>
<%--            pp.style.display="none";--%>
<%--            console.log(data.code);--%>
<%--            if(data.code=="200"){--%>
<%--                window.location='/mac/product/index';--%>
<%--            }else if(data.code=="404"){--%>
<%--                uu.style.display="";--%>

<%--            }else if(data.code=="500"){--%>
<%--                pp.style.display="";--%>
<%--            }--%>
<%--        })--%>
<%--    }--%>
<%--</script>--%>

<div style="height: 50px ;width: 100%;">
<%--    <input type="text" placeholder="请输入要定位的详细地址" id="citydetail">--%>
<%--    <button type="button" class="btn btn-default" onclick="search()">搜索</button>--%>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="height:20px;width:70px;text-align: center"><strong>龙腾地图搜索为您导航</strong></span>

    <button type="button" class="btn btn-default" style="float:right"  onclick="returnz()">返回</button>

</div>
<div id="container">


<%--    <div>--%>

<%--        <button type="button" value="搜索" onclick="search()"></button>--%>

<%--    </div>--%>

</div>
</body>
<script src="/boot/js/jquery.js"></script>
<script src="/boot/js/bootstrap.min.js"></script>

<script src="/boot/plugins/revolution/js/jquery.themepunch.revolution.min.js"></script>
<script src="/boot/plugins/revolution/js/jquery.themepunch.tools.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.actions.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.migration.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="/boot/plugins/revolution/js/extensions/revolution.extension.video.min.js"></script>
<script src="/boot/js/main-slider-script.js"></script>

<script src="/boot/js/jquery-ui.js"></script>
<script src="/boot/js/jquery.fancybox.pack.js"></script>
<script src="/boot/js/jquery.fancybox-media.js"></script>
<script src="/boot/js/owl.js"></script>
<script src="/boot/js/appear.js"></script>
<script src="/boot/js/wow.js"></script>
<script src="/boot/js/main-slider-script.js"></script>
<script src="/boot/js/script.js"></script>
</html>
<script>
    function returnz() {
        window.location="/boot/user/index";

    }


    var map = new BMapGL.Map('container');
    var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    // 创建标记图标
    var myIcon = new BMapGL.Icon("images/home1.jpg", new BMapGL.Size(52, 32));
    // 创建Marker标注，使用新建的标记图标
    var pt = new BMapGL.Point(116.417, 39.909);
    var marker = new BMapGL.Marker(pt, {
        icon: myIcon
    });


    // 将标注添加到地图
    map.addOverlay(marker);

    var locationControl = new BMapGL.LocationControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMapGL.Size(20, 20)
    });
    // 将控件添加到地图上
    map.addControl(locationControl);
    // 创建城市选择控件
    var cityControl = new BMapGL.CityListControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMapGL.Size(10, 5)
    });
    // 将控件添加到地图上
    map.addControl(cityControl);



    // 创建图文信息窗口
    var sContent = "<h4 style='margin:0 0 5px 0;'>天安门</h4>"

    var infoWindow = new BMapGL.InfoWindow(sContent);
    // marker添加点击事件
    marker.addEventListener('click', function () {
        this.openInfoWindow(infoWindow);
        // 图片加载完毕重绘infoWindow
        document.getElementById('imgDemo').onload = function () {
            infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
        };
    });

    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
    map.addControl(zoomCtrl);


    //导航
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
    //p1为起点,p2为终点
    // var p1 = new BMapGL.Point(120.5860881588029,31.326729131202804);
    // var p2 = new BMapGL.Point(118.34380269644235,29.71960862387751);

    var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
    driving.search(p1, p2);

<%--   function search() {--%>

<%--       let citydetail = document.getElementById("citydetail").value;--%>
<%--       // alert(citydetail)--%>

<%--       window.location="/boot/user/map?cityDetail="+citydetail;--%>


<%--   }--%>

<%--    console.log(${cityDetail});--%>
<%--    var map = new BMapGL.Map('container');--%>
<%--    var point = new BMapGL.Point(116.404, 39.915);--%>
<%--    map.centerAndZoom(point, 15);--%>


<%--    // var local = new BMapGL.LocalSearch(map, {--%>
<%--    //     renderOptions:{map: map}--%>
<%--    // });--%>
<%--    // local.search("景点");--%>


<%--    var myGeo = new BMapGL.Geocoder();--%>
<%--    // 将地址解析结果显示在地图上，并调整地图视野--%>
<%--    myGeo.getPoint('${citydetail}', function(point){--%>
<%--        if(point){--%>
<%--            map.centerAndZoom(point, 15);--%>
<%--            map.addOverlay(new BMapGL.Marker(point, {title: '${citydetail}'}))--%>
<%--        }else{--%>
<%--            alert('您选择的地址没有解析到结果！');--%>
<%--        }--%>
<%--    }, '常州市')--%>

<%--   // // 创建标记图标 导航--%>
<%--   //  var myIcon = new BMapGL.Icon("images/icon.png", new BMapGL.Size(52, 32));--%>
<%--   //  // 创建Marker标注，使用新建的标记图标--%>
<%--   //  var pt = new BMapGL.Point(116.417, 39.909);--%>
<%--   //  var marker = new BMapGL.Marker(pt, {--%>
<%--   //      icon: myIcon--%>
<%--   //  });--%>
<%--   //--%>
<%--   //--%>
<%--   //  // 将标注添加到地图--%>
<%--   //  map.addOverlay(marker);--%>

<%--    var locationControl = new BMapGL.LocationControl({--%>
<%--        // 控件的停靠位置（可选，默认左上角）--%>
<%--        anchor: BMAP_ANCHOR_TOP_RIGHT,--%>
<%--        // 控件基于停靠位置的偏移量（可选）--%>
<%--        offset: new BMapGL.Size(20, 20)--%>
<%--    });--%>
<%--    // 将控件添加到地图上--%>
<%--    map.addControl(locationControl);--%>
<%--    // 创建城市选择控件--%>
<%--    var cityControl = new BMapGL.CityListControl({--%>
<%--        // 控件的停靠位置（可选，默认左上角）--%>
<%--        anchor: BMAP_ANCHOR_TOP_LEFT,--%>
<%--        // 控件基于停靠位置的偏移量（可选）--%>
<%--        offset: new BMapGL.Size(10, 5)--%>
<%--    });--%>
<%--    // 将控件添加到地图上--%>
<%--    map.addControl(cityControl);--%>



<%--    // 创建图文信息窗口--%>
<%--    var sContent = "<h4 style='margin:0 0 5px 0;'>天安门</h4>"--%>

<%--    var infoWindow = new BMapGL.InfoWindow(sContent);--%>
<%--    // marker添加点击事件--%>
<%--    marker.addEventListener('click', function () {--%>
<%--        this.openInfoWindow(infoWindow);--%>
<%--        // 图片加载完毕重绘infoWindow--%>
<%--        document.getElementById('imgDemo').onload = function () {--%>
<%--            infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏--%>
<%--        };--%>
<%--    });--%>

<%--    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别--%>
<%--    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放--%>
<%--    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件--%>
<%--    map.addControl(scaleCtrl);--%>
<%--    var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件--%>
<%--    map.addControl(zoomCtrl);--%>


<%--    //导航--%>
<%--    var map = new BMapGL.Map("container");--%>
<%--    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);--%>

<%--    var p1 = new BMapGL.Point(116.301934,39.977552);--%>
<%--    var p2 = new BMapGL.Point(116.508328,39.919141);--%>

<%--    var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});--%>
<%--    driving.search(p1, p2);--%>

</script>
<script src="/boot/plugins/jquery/jquery.min.js"></script>
<script src="/boot/plugins/bootstrap/js/bootstrap.min.js"></script>